<template>
  <div class="modal-wrap">
    <div class="modal" >
      <div class="modal-close" @click="closeModal">×</div>
      <div class="back-content">
        <textarea v-model="commentContent" placeholder="请输入……">
        </textarea>
        <span v-if="!contentIsNull" class="btn" @click="doComment">提&nbsp;&nbsp;交</span>
        <span v-if="contentIsNull" class="btn btn-disable" >提&nbsp;&nbsp;交</span>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        contentIsNull: true
      }
    },
    methods: {
      closeModal () {
        this.$store.dispatch('content_detail/setCommentModal', {
          commentModal: false
        })
      },
      doComment () {
        this.$store.dispatch('content_detail/doComment', {
        })
        this.$store.dispatch('content_detail/setCommentModal', {
          commentModal: false
        })
        this.$store.dispatch('content_detail/setCommentContent', {commentContent: ''})
      }
    },
    computed: {
      commentContent: {
        get () {
          return this.$store.state.content_detail.commentContent
        },
        set (value) {
          if (value !== null && value !== undefined && value !== '') {
            this.contentIsNull = false
          }
          this.$store.dispatch('content_detail/setCommentContent', {commentContent: value})
        }
      }
    }
  }
</script>
<style>
  .modal-close{
    font-size: 25px;
    position: relative;
    left: 93%;
    top:10px;
    cursor: pointer;
  }
  .back-content{
    width: 100%;
    height: 100%;
    text-align: center;
  }
  .back-content>textarea{
    width: 90%;
    height: 60%;
    outline: none;
    font-size: 16px;
    box-shadow: 0 0 5px 1px #b0b0b0 inset;
    border: none;
    margin: 20px auto;
  }
  .back-content>textarea:focus{
    box-shadow: 0 0 5px 1px #13BA31 inset;
  }
  .btn {
    width: 90%;
    font-size: 16px;
    font-weight: 600;
  }
  .modal-wrap{
    z-index: 3;
  }

  /* 手机或小平板 phone */
  @media all and (max-width: 766px) {
    .modal{
      width: 100%;
      margin-bottom: -2px;
      box-shadow: none;
      height: 70%
    }

  }

</style>
